<!--
 * @author  dumeng
 新建课件
-->
<template>
  <div class="file-manage-dailog">
    <el-dialog
      v-el-drag-dialog
      :lock-scroll="false"
      :close-on-click-modal="false"
      :destroy-on-close="true"
      :visible.sync="visible"
      title="上传文件"
      center
      width="600px"
      custom-class="courseware-create-dialog"
      @close="$emit('close')"
    >
      <section v-loading="loading" class="courseware-create-main">
        <el-form ref="form" :model="form" label-width="120px" class="form">
          <el-form-item label="文件类型" prop="subjectType">
            <el-radio-group v-model="form.subjectType" @change="changeFileAccept">
              <el-radio label="KCLX01">视频</el-radio>
              <el-radio label="KCLX03">音频</el-radio>
              <el-radio label="KCLX02">图片</el-radio>
              <el-radio label="KCLX04">文件</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="上传文件" prop="courseId">
            <div v-if="!fileInfo.id" class="selectbtn" @click="uploadFile.showUpload = true">开始上传</div>
            <div v-else>{{ fileInfo.fileName }}</div>
            <Upload
              v-if="uploadFile.showUpload"
              ref="upload"
              :accept="uploadFile.accept"
              :limit="1"
              :show-chunks="true"
              :multiple="false"
              :chunk-size="uploadFile.chunksize"
              @close="uploadFile.showUpload = false"
              @success="uploadSuccess"
            >
              <div slot="tip" class="upload-tip">
                <i class="el-icon-info" />
                :
                只能上传：{{ form.subjectType | filterTip }}
              </div>
            </Upload>
          </el-form-item>
        </el-form>
      </section>
      <section class="courseware-create-footer">
        <el-button style="padding: 10px 30px;" @click="$emit('close')">取 消</el-button>
        <el-button type="primary" @click="handleSubmit">确 定</el-button>
      </section>
    </el-dialog>
  </div>
</template>

<script>
import Upload from './upload'
import elDragDialog from '@/directive/el-drag-dialog' // base on element-ui

export default {
  name: 'Create',
  components: { Upload },
  directives: { elDragDialog },
  filters: {
    filterTip(subjectType) {
      if (subjectType === 'KCLX01') {
        return '视频文件'
      } else if (subjectType === 'KCLX03') {
        return '音频文件'
      } else if (subjectType === 'KCLX02') {
        return '图片文件'
      } else if (subjectType === 'KCLX04') {
        return '文件'
      }
    }
  },
  props: {
    info: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
      loading: false,
      form: {
        id: '',
        subjectName: '',
        subjectClassify: '',
        subjectType: 'KCLX01',
        courseId: '',
        subjectDuration: ''
      },
      uploadFile: {
        showUpload: false,
        accept: 'video/*',
        chunksize: 10 * 1024 * 1024,
        file: '',
        oldfile: ''
      },
      preview: {
        state: false,
        fileId: '',
        fileType: 1
      },
      isFull: false, // 预览是否全屏
      visible: true,
      fileInfo: {
        fileName: '',
        fileType: '',
        ossPath: '',
        id: '',
        typeCode: '',
        time: ''
      }
    }
  },
  created() {
  },
  methods: {
    downLoad() {
      const link = document.createElement('a')
      link.style.display = 'none'
      link.href = '/API-DOCUMENT/document/file/download?id=' + this.info.courseId
      link.setAttribute('download', this.uploadFile.oldfile.name)
      link.setAttribute('target', '_blank')
      document.body.appendChild(link)
      link.click()
      document.body.removeChild(link)
    },
    clearFile() {
      this.uploadFile.file = ''
      if (!this.info.id) {
        this.form.courseId = ''
      }
      this.form.subjectDuration = ''
    },
    getFileType(subjectType) {
      if (subjectType === 'KCLX01') {
        return '视频文件'
      } else if (subjectType === 'KCLX03') {
        return '音频文件'
      } else if (subjectType === 'KCLX02') {
        return '图片文件'
      } else if (subjectType === 'KCLX04') {
        return '文件'
      }
    },
    /**
     * 切换课件类型动态修改文件上传组件文件限制
     */
    changeFileAccept() {
      if (this.form.subjectType === 'KCLX01') {
        this.uploadFile.accept = 'video/*'
      } else if (this.form.subjectType === 'KCLX03') {
        this.uploadFile.accept = 'audio/*'
      } else if (this.form.subjectType === 'KCLX02') {
        this.uploadFile.accept = 'image/*'
      } else if (this.form.subjectType === 'KCLX04') {
        this.uploadFile.accept = ''
      }
      this.clearFile()
    },
    uploadSuccess(id, files, data) {
      if (id) {
        this.fileInfo.id = id
        this.fileInfo.fileName = files[0].name
        this.fileInfo.fileType = this.getFileType(this.form.subjectType)
        this.fileInfo.ossPath = data.ossPath
        this.fileInfo.typeCode = this.form.subjectType
        this.fileInfo.time = new Date().Format('yyyy-MM-dd hh:mm:ss')
        this.uploadFile.showUpload = false
      }
    },
    handleSubmit() {
      console.log(this.fileInfo)
      if (this.fileInfo.id) {
        this.$emit('onSubmint', this.fileInfo)
      } else {
        this.$message({
          type: 'warning',
          message: '请上传文件'
        })
      }
    }

  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.file-manage-dailog{
  .courseware-create-dialog .el-dialog__body{
    min-height: 200px;
    overflow-y: auto;
  }
  .select-data {
    display: inline-block;
    background: rgba(246, 246, 246, 1);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    color: rgba(51, 51, 51, 1);
    padding: 0 10px;
    margin-right: 5px;
    margin-bottom: 8px;

    i {
      cursor: pointer;
      padding-left: 5px;
    }
  }

  .selectbtn {
    display: inline-block;
    width: 120px;
    background: rgba(255, 255, 255, 1);
    @include border-color(1px, dotted, $mainColor);
    border-radius: 4px;
    font-size: 14px;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    @include font-color($mainColor);
    text-align: center;
    cursor: pointer;
  }

  .courseware-create-footer {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    text-align: center;
    padding: 10px 0;
    background-color: white;
    box-shadow: 0 -3px 6px #f5f5f5;
  }
  .courseware-preview {
    .el-dialog__body{
      position: relative;
      .full{
        position: absolute;
        width: 100px;
        height: 58px;
        right: 50px;
        top: -58px;
        display: flex;
        align-items: center;
        text-align: right;
      }
    }
  }
}
</style>
